<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item :to="{ path: '/' }">教师</el-breadcrumb-item>
      <el-breadcrumb-item>课程设计任务</el-breadcrumb-item>
      <el-breadcrumb-item>发布历史</el-breadcrumb-item>
      <el-breadcrumb-item>课程设计任务发布</el-breadcrumb-item>
    </el-breadcrumb>


    <div>
      <h2 style="border-bottom: 1px solid #e0e0e0">课程设计任务发布</h2>
    </div>

    <!-- 主要内容 -->
    <div style="margin: 2% 3% 3% 3%;border: 1px solid #e0e0e0;border-radius: 5px;">
      <div style=" width: auto; margin: 2% 3% 1% 3%;padding-left: 13%;">
        <h1>实践课题任务</h1>
        <el-table :data="mySchema" height="200" style="width: 70%;">
          <el-table-column prop="onloadDate" label="时间" :formatter="formatDate" />
          <el-table-column prop="courseName" label="实践课程" />
          <el-table-column prop="teachName" label="任课老师" />
          <el-table-column prop="majorName" label="专业名称" />
          <el-table-column prop="className" label="班级" />
        </el-table>
      </div>


      <!-- 表格 -->
      <div style=" margin: 2% 3% 1% 3%; height: 50%;padding-left: 13%;">
        <h1>发布任务</h1>
        <el-table @selection-change="ea" height="320" :data="taskList" style="width: 70%;">
          <el-table-column type="selection" aria-checked="false" />
          <el-table-column type="index" width="50" />
          <el-table-column prop="taskId" label="题号" width="180" />
          <el-table-column prop="taskName" label="题目" />
          <!-- <el-table-column prop="scheduleId" label="发布日期" /> -->
          <el-table-column fixed="right" label="操作">
            <template #default="scope">
              <el-popover placement="right" :width="400" trigger="click">
                <template #reference>
                  <el-button link type="primary" size="small">详情</el-button>
                </template>
                <h2 style="text-align: center;border-bottom: 1px solid #9e9e9e">{{ scope.row.taskName }}</h2>
                <div style="min-height: 100px;padding: 5px;">
                  <le-text class="mx-1" size="large" :padding="50">{{ scope.row.content }}</le-text>
                </div>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 下部部输入框 -->
      <div style=" height: 100%; margin: 1% 3% 2% 3%;padding-left: 13%;">
        <el-row :gutter="20" style=" margin-top: 20px;">
          <el-col :span="4">
            <div class="grid-content ep-bg-purple">
              <el-select v-model="courseTaskPublish.practicalId" class="m-2" placeholder="选择班级" :change="add">
                <el-option v-for="item in classNum" :key="item.practicalId" :label="item.className"
                  :value="item.practicalId" />
              </el-select>
            </div>
          </el-col>
          <!-- 开始时间 -->
          <el-col :span="4">
            <div class="grid-content ep-bg-purple" >
              <el-date-picker value-format="YYYY-MM-DD" v-model="taskTime" type="daterange" range-separator="至" start-placeholder="开始时间"
                end-placeholder="结束时间" />
            </div>
          </el-col>

        </el-row>
        <el-input v-model="courseTaskPublish.scaleRule" :rows="2" type="textarea" placeholder="评分标准"
          style="margin-top: 10px; margin-right: 15px; width: 50%;" />

        <el-button type="primary" @click="coursePublish">发布</el-button>
        <el-button  @click="backto">返回</el-button>
      </div>

    </div>

  </div>
</template>
<script setup>
import { ArrowRight, Calendar, Search, Plus } from '@element-plus/icons-vue'
import { ref, onBeforeMount } from 'vue'
import requests from '@/api/ajax.js'
import { useRouter } from 'vue-router'
import { create } from 'lodash';

const router_useRouter = useRouter()

//题库Table
const taskList = ref([{
  taskId: '',
  taskName: '',
  content: '',
  taskType: '',
}])
//挂在前
onBeforeMount(() => {
  //初始显示题库数据
  const asd = requests({ url: "/inner/taskBase", method: "get", }).then(res => {
    //存储用户信息到浏览器toke
    const abc = res.rdata
    taskList.value = abc
  })
    .catch(err => {
      console.error(err.data);
      // 登录请求失败后的操作
    });

  const geiPracticalTask = requests({ url: "/inner/practicalTaskCourseVos", method: "get", }).then(res => {
    //存储用户信息到浏览器toke
    const abc = res.rdata
    mySchema.value = abc

  })
    .catch(err => {
      console.error(err.data);
      // 登录请求失败后的操作
    });

  //获取班级和课程编号
  const aad = requests({ url: "/inner/courseClass", method: "get", }).then(res => {
    //存储用户信息到浏览器toke
    const abc = res.rdata
    classNum.value = abc
    // console.log(classNum.value)

  })
    .catch(err => {
      console.error(err.data);
      // 登录请求失败后的操作
    });
})

//在题库中通过课程筛选题
function changeCourses(val) {
  const acd = requests({ url: "/course/taskBase/" + val, method: "get" }).then(res => {
    //存储用户信息到浏览器toke
    const abc = res.data.rdata
    taskList.value = abc
  })
    .catch(err => {
      console.error(err.data);
      // 登录请求失败后的操作
    })
}

const taskTime = ref('')

//班级选择
const classNum = ref([
  {}
])

//实践课题任务
const mySchema = ref([
  {
    practicalId: '',
    classId: "",
    className: "",
    adviserId: '',
    adviserName: "",
    teachId: '',
    teachName: "",
    practicalType: '',
    onloadDate: "",
    courseSchema: '',
    planId: '',
    courseId: '',
    courseName: "",
    startDate: '',
    majorName: "",
    enrolDate: ""
  },

])

//有关发布的选项
const courseTaskPublish = ref({
  practicalId: '',//实践任务编号
  startTime: '',//开始时间
  endTime: '',//实践截止实践
  scaleRule: '',//评分标准
})

//结构后选择的内容
const courseTask = ref([
  {
    taskId: '',
    taskName: '',
    content: '',
    taskType: '',
  },
])

//checkbox选择后对所选内容进行解构
function ea(value) {
  const aa = value
  const bb = JSON.parse(JSON.stringify(aa))
  courseTask.value = bb
}


//发布按钮
function coursePublish() {  
  //给表格的内容添加新属性
  const publishtask = ref([

  ])
  
  for (let i = 0; i < courseTask.value.length; i++) {
    const obj = {}//每次循环创建一个新的对象
    obj.taskId = courseTask.value[i].taskId
    publishtask.value.push(obj);
    publishtask.value[i].practicalId = courseTaskPublish.value.practicalId
    publishtask.value[i].startDate = taskTime.value[0]
    publishtask.value[i].endDate = taskTime.value[1]
    publishtask.value[i].scaleRule = courseTaskPublish.value.scaleRule
  }

  // postCousePublish(value).then(res)
  const acd = requests({ url: "/inner/coursePublish", method: "post", data: publishtask.value }).then(res => {
    if (res.code === 20011) {
      ElMessage({
        message: res.msg,
        type: 'success',
      })
      router_useRouter.push({ path: 'coursePublish' })
    } else if (res.code === 20010) {
      ElMessage({
        message: res.msg,
        type: 'error',
      })
    } else {
      ElMessage({
        message: '发生错误',
        type: 'warning',
      })
    }

  })
    .catch(err => {
      console.error(err.data);
      // 登录请求失败后的操作
    })
  // .finally(()=>{
  //   const asd = requests({ url: "/taskBaseVo", method: "get",}).then(res => {
  //         //存储用户信息到浏览器toke
  //         const abc =res.data.rdata
  //         taskList.value = abc
  //   })
  //   .catch(err => {
  //       console.error(err.data);
  //       // 登录请求失败后的操作
  //   });
  // })

}

//返回至发布历史
function backto() {
  router_useRouter.push({ path: 'coursePublish' })
}

//时间格式化
function formatDate(row, column, cellValue, index) {
  let format = 'YYYY-mm-dd'
  let date = new Date(cellValue);
  const dataItem = {
    'Y+': date.getFullYear().toString(),
    'm+': (date.getMonth() + 1).toString(),
    'd+': date.getDate().toString(),
  }
  Object.keys(dataItem).forEach((item) => {
    const ret = new RegExp(`(${item})`).exec(format);
    if (ret) {
      format = format.replace(ret[1], ret[1].length === 1 ? dataItem[item] : dataItem[item].padStart(ret[1].length, '0'));
    }
  });
  return format
}
</script>
<style scoped>
.demo-datetime-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

.demo-datetime-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.demo-datetime-picker .block:last-child {
  border-right: none;
}

.demo-datetime-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>